<!--
 * @Description: 分片
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-05-11 17:43:10
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/add/zone.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    v-dialogDrag
    title="分片尺寸"
    :visible.sync="shows"
    width="660px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="86px" inline>
      <el-row>
        <el-col :span="24">
          <el-form-item label="墙宽尺寸">
            <el-form-item
              prop="largeSmallPiece"
              label-width="0"
              v-if="form.section === '4'"
            >
              <el-input
                v-model="form.largeSmallPiece"
                placeholder="请输入"
                style="width: 100px"
                clearable
              ></el-input>
              米
            </el-form-item>
            <el-form-item prop="wright" label-width="0" v-else>
              <el-input-number
                v-model="form.wright"
                placeholder="请输入"
                style="width: 100px"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
              米
            </el-form-item>
            <el-form-item><span class="ml10 mr10">x</span></el-form-item>
            <el-form-item prop="height" label-width="0">
              <el-input-number
                v-model="form.height"
                placeholder="请输入"
                style="width: 100px"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
              米
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="倍率" prop="magnification">
            <el-input-number
              v-model="form.magnification"
              placeholder="请输入"
              style="width: 100px"
              clearable
              :min="1"
              :controls="false"
              :precision="2"
            ></el-input-number>
            倍
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="分片" prop="section">
            <el-radio-group v-model="form.section">
              <el-radio
                v-for="item in dict.type.order_curtain_section"
                :key="item.value"
                :label="item.value"
              >
                <template v-if="item.value === '3'">
                  <el-input-number
                    :disabled="form.section !== '3'"
                    v-model="form.otherSection"
                    style="width: 60px"
                    clearable
                    :min="1"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                  片
                </template>
                <template v-else>{{ item.label }}</template>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  dicts: ["order_curtain_section"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  watch: {
    "form.wright": {
      handler(v) {
        if (v !== null && v < 1.2) {
          this.form.magnification = 2.3;
        } else {
          this.form.magnification = 2;
        }
      },
    },
  },
  data() {
    return {
      // 表单参数
      form: {
        wright: undefined,
        height: undefined,
        largeSmallPiece: "",
        magnification: 2,
        section: "0",
        otherSection: 3,
      },
      // 表单校验
      rules: {
        wright: [{ required: true, message: "请输入", trigger: "blur" }],
        largeSmallPiece: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        height: [{ required: true, message: "请输入", trigger: "blur" }],
        magnification: [{ required: true, message: "请输入", trigger: "blur" }],
        section: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    if (this.data) {
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = this.data?.[key] || "";
        }
      }
      this.form.magnification = this.form.magnification || 2;
      this.form.otherSection = this.form.otherSection || 3;
    }
  },
  methods: {
    /** 提交按钮 */
    async submitForm() {
      try {
        await this.$refs["form"].validate();
        const widths = this.form.largeSmallPiece.split("+");
        if (this.form.section === "4") {
          this.form.wright = widths.reduce((prev, item) => {
            prev += +item || 0;
            return prev;
          }, 0);
        }
        this.$emit("on-change", this.form);
        this.shows = false;
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
